<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<title>Home</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!-- Meta tag Keywords -->
	<!-- css files -->
	<link rel="stylesheet" th:href="@{/mysource/css/style.css}" type="text/css" media="all" />
	<!-- Style-CSS -->
	<link rel="stylesheet" th:href="@{/mysource/css/fontawesome-all.css}">
	<!-- Font-Awesome-Icons-CSS -->


	<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	<!-- //css files -->
</head>

<body>
	<!-- bg effect -->
	<div id="bg">
		<canvas></canvas>
		<canvas></canvas>
		<canvas></canvas>
	</div>
	<!-- //bg effect -->
	<!-- title -->
	<h1>Online Vote</h1>
	<!-- //title -->
	<!-- content -->
	<div class="sub-main-w3">
		<form  method="post">
			<h2>Login Now
				<i class="fas fa-level-down-alt"></i>
			</h2>
			<div class="form-style-agile">
				<label>
					<i class="fas fa-user"></i>
					账号
				</label>
				<input placeholder="Email" id="account" name="account" type="text" required="">
			</div>
			<div class="form-style-agile">
				<label>
					<i class="fas fa-unlock-alt"></i>
					密码
				</label>
				<input placeholder="Password" name="password" id="password" type="password" required="">
			</div>
			<!-- checkbox -->
			<div class="wthree-text">
				<ul>
					<li>
						<label class="anim">
							<a th:href="@{/register}">注册</a>
						</label>
					</li>
					<li>
						<a href="#">忘记密码</a>
					</li>
				</ul>
			</div>
			<!-- //checkbox -->
			<input type="button" class="layui-btn layui-btn-lg layui-btn-normal" style="background: #ee146c" id="btn1" value="登录">
		</form>

	</div>
	<!-- //content -->

	<!-- copyright -->

	<!-- //copyright -->

	<!-- Jquery -->
	<script th:src="@{/mysource/js/jquery-3.3.1.min.js}"></script>
	<!-- //Jquery -->

	<!-- effect js -->
	<script th:src="@{/mysource/js/canva_moving_effect.js}"></script>
	<!-- //effect js -->


	<script type="text/javascript">
		$(function (){
			$('#btn1').click(function (){
				// 使用JQuery发送一个ajax请求

				var account = $('#account').val();
				var pwd = $('#password').val();


				$.ajax({
					url:"/doLogin",
					type:"post",
					data:{"account":account,"password":pwd},
					success:function (data){
						if (data.flag){
							alert(data.msg);
							if (data.user.role==1){
								location.href="/main";
							}else if (data.user.role==2) {
								location.href="/main"
							}else if(data.user.role==4){
								location.href="/main"
							}else if(data.user.role==3){
								location.href="/main"
							}

						}else {
							location.reload()
							alert(data.msg);
						}

					}
				})


			})
		})
	</script>


</body>

</html>